<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header">
			<el-form ref="searchForm" class="header-area" :model="searchForm" label-width="90px" style="height: auto">
				<el-col :span="6">
					<el-form-item label="直播标题" prop="liveName">
						<el-input v-model="searchForm.liveName" placeholder="请输入标题"></el-input>
					</el-form-item>
				</el-col>
				
				<el-col :span="6">
					<el-form-item label="直播频道" prop="channelCode">
						<el-select v-model="searchForm.channelCode" placeholder="请选择频道" style="width: 100%;">
							<el-option :value="item.channelCode" :label="item.channelName" v-for="item of channelList" :key="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				
				<el-col :span="5">
					<el-form-item label="直播状态" prop="status">
						<el-select v-model="searchForm.status" placeholder="选择状态" size="small" style="width: 100%;">
							<el-option value="" label="全部"></el-option>
							<el-option value="1" label="上架"></el-option>
							<el-option value="0" label="下架"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				
				<el-col :span="3">
					<div class="search-submit">
						<el-button type="primary" size="medium" @click="submitSearch">查询</el-button>
						<el-button type="primary" plain size="medium" @click="resetSearch">重置</el-button>
					</div>
				</el-col>
			</el-form>
		</template>
		
		<!-- 列表部分 -->
		<template>
			<!-- 表格上方的按钮 -->
			<div class="table-header">
				<el-button type="primary" @click="add()">新增直播</el-button>
			</div>
			
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column prop="liveName" label="直播标题"></el-table-column>
				
				<el-table-column prop="startTime" label="直播开始时间" :formatter="forDate" width="200"></el-table-column>
				<el-table-column prop="endTime" label="直播结束时间" :formatter="forDate" width="200"></el-table-column>
				
				<el-table-column prop="liveName" label="领券限制" width="150" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.couponQuantityPerUser">每人{{scope.row.couponQuantityPerUser}}券</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				
				<el-table-column prop="status" label="状态" width="150" align="center">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.status == 1">上架</el-tag>
						<el-tag type="danger" v-else>下架</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column prop="createTime" label="创建时间" :formatter="forDate" width="200"></el-table-column>
				
				<el-table-column fixed="right" label="操作" width="220">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="edit(scope.row)">编辑信息</el-button>
						<el-button type="warning" size="small" @click="setCoupon(scope.row)">设置优惠券</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<!-- 翻页 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>
		
		<!-- 弹窗 -->
		<template>
			<!-- 添加/编辑弹窗 -->
			<handle-live-dialog
				:isShow="showHandleDialog"
				:id="currentId"
				:item="currentItem"
				:isEdit="isEdit"
				@submit="fetchData"
				@close="closeHandleDialog"
			></handle-live-dialog>
			
			<set-coupon-dialog
				:isShow="showSetCouponDialog"
				:item="currentItem"
				@close="closeSetCouponDialog"
			></set-coupon-dialog>
		</template>
	</d2-container>
</template>

<script>
	import { getLiveList, getChannelList, createQRcode } from '@api/live/live'
	import handleLiveDialog from './components/handle-live-dialog'
	import setCouponDialog from './components/set-coupon-dialog'
	import dayjs from 'dayjs'
	export default {
		components: {
			handleLiveDialog,
			setCouponDialog,
		},
		data() {
			return {
				searchForm: {
					liveName: '',
					channelCode: '',
					status: '',
				},
				channelList: [],
				
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				
				showHandleDialog: false,
				showSetCouponDialog: false,
				isEdit: false,
				currentId: 0,
				currentItem: {},
			}
		},
		methods: {
			fetchData() {
				this.loading = true;
				
				getLiveList({
					liveName: this.searchForm.liveName,
					channelCode: this.searchForm.channelCode,
					status: this.searchForm.status,
					pageNum: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
						this.loading = false;
					})
					.catch(err => {
						this.loading = false;
					})
			},
			
			handleSizeChange(val) { //处理显示条数
				this.pageSize = val;
				this.fetchData();
			},
			handleCurrentChange(val) { //处理翻页
				this.currentPage = val;
				this.fetchData();
			},
			forDate(row, column) {
				if(column.property == 'createTime') {
					return row.createTime == null ? '-' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if(column.property == 'startTime') {
					return row.startTime == null ? '-' : dayjs(row.startTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if(column.property == 'endTime') {
					return row.endTime == null ? '-' : dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss');
				}
			},
			
			getChannel() { //获取直播频道
				getChannelList({
					status: 1,
					pageNum: 1,
					pageSize: 100,
				})
					.then(res => {
						this.channelList = res.data.content;
					})
			},
			submitSearch() { //搜索
				this.currentPage = 1;
				this.fetchData();
			},
			resetSearch() {
				this.$refs.searchForm.resetFields();
				
				this.currentPage = 1;
				this.fetchData();
			},
			
			add() { //添加
				this.showHandleDialog = true;
			},
			edit(item) { //编辑
				this.currentId = item.id;
				this.currentItem = item;
				this.isEdit = true;
				this.showHandleDialog = true;
			},
			closeHandleDialog() { //关闭添加or编辑弹窗
				this.showHandleDialog = false;
				this.isEdit = false;
			},
			
			setCoupon(item) {
				this.currentItem = item;
				this.showSetCouponDialog = true;
			},
			closeSetCouponDialog() {
				this.showSetCouponDialog = false;
			}
		},
		mounted() {
			this.fetchData();
			this.getChannel();
		}
	}
</script>

<style>
</style>